<template>
	<view>
		<my-navbar title="修改班级" :border="true"></my-navbar>
		<view class="changeSquad-form">
			<view class="form-item" @click="i_school.clickItem">
				<view class="item-label">您的所属学校</view>
				<input class="item-value" :value="jxyUserInfo.schoolName" type="text" :disabled="true"
					placeholder="请选择您所属的班级" placeholder-style="color: #c3c3c3;" />
			</view>
			<view class="form-item" @click="i_squad.clickItem">
				<view class="item-label">您的所属班级</view>
				<input class="item-value icon" :value="squadName" type="text" :disabled="true" placeholder="请选择您所属的班级"
					placeholder-style="color: #c3c3c3;" />
			</view>
			<view class="form-item none-border">
				<view class="item-label">您的身份</view>
				<view class="item-range">
					<view v-for="(i, j) in i_identity.range" :key="j" class="range-item"
						:class="[i_identity.data.educationIdentity === i.educationIdentity ? 'selected' : '']"
						@click="i_identity.clickItem(i.educationIdentity)">
						{{ i.text }}
					</view>
				</view>
				<view class="item-error">{{ i_identity.error }}</view>
			</view>
		</view>
		<!-- 浮动底部 START -->
		<view class="app-offset">
			<view class="changeSquad-button"></view>
			<safe-area></safe-area>
		</view>
		<view class="app-fixed-bottom" style="background-color: #FFFFFF;">
			<view class="changeSquad-button app-button primary" :class="[l_isPass ? '' : 'disabled']"
				hover-class="hover" @click="clickConfirmButton">确定</view>
			<safe-area></safe-area>
		</view>
		<!-- 浮动底部 END -->
		<!-- 弹窗 START -->
		<template>
			<!-- 请选择年级 -->
			<my-popup :custom="2" :show="p_grade.show" @handle="p_grade.handle">
				<view class="page-popup popup1">
					<view class="popup-title">
						<view class="title-center">请选择年级</view>
						<view class="title-side">
							<image class="side-icon" src="/static/img/icon_close.png" @click="p_grade.clickIcon">
							</image>
						</view>
					</view>
					<scroll-view class="popup1-content" :scroll-y="true">
						<view v-for="(i, j) in p_grade.range" :key="j"
							:class="[i.gradeId === i_squad.data.gradeId ? 'active' : '']" class="content-item"
							hover-class="button-hover" @click="p_grade.clickItem(i)">
							<view class="item-text">{{ i.gradeName }}</view>
						</view>
						<safe-area></safe-area>
					</scroll-view>
				</view>
			</my-popup>
			<!-- 请选择班级 -->
			<my-popup :custom="2" :show="p_squad.show" @handle="p_squad.handle">
				<view class="page-popup popup2">
					<view class="popup-title">
						<view class="title-center">请选择班级</view>
						<view class="title-side">
							<image class="side-icon" src="/static/img/icon_back.png" @click="p_squad.clickIcon"></image>
						</view>
					</view>
					<view class="popup2-subtitle">所属年级：{{ p_grade.data.grade.gradeName }}</view>
					<scroll-view class="popup2-content" :scroll-y="true">
						<view v-for="(i, j) in p_squad.range" :key="j" class="content-item"
							:class="[i.id === i_squad.data.squadId ? 'active' : '']" hover-class="button-hover"
							@click="p_squad.clickItem(i)">
							<view class="item-main">
								<view class="main-label">
									<text>{{ i.squadName }}班</text>
									<text v-if="i.classTeacherName">（班主任：{{ i.classTeacherName }}）</text>
								</view>
								<view v-if="i.isJoin === 'Y'" class="main-mark">已加入</view>
							</view>
							<view class="item-line"></view>
						</view>
						<safe-area></safe-area>
					</scroll-view>
				</view>
			</my-popup>
		</template>
		<!-- 弹窗 END -->
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import form from '@/components/my-form/my-form.js';
	export default {
		data() {
			return {
				id: '',
				i_school: {
					clickItem: () => {
						this.$showToast('学校不可修改，如需修改请联系客服')
					}
				},
				i_squad: {
					data: {
						grade: '',
						gradeId: '',
						squad: '',
						squadId: ''
					},
					error: '',
					checkData: () => {
						return [
							() => {
								if (!this.squadName) return '请选择您所属的班级';
							}
						];
					},
					clickItem: async () => {
						uni.showLoading({
							mask: true
						});
						const context = this.i_squad;
						context.error = '';
						let res1;
						try {
							res1 = await this.$api.common.get_squad_select_list({
								syoufk: this.jxyUserInfo.schoolId
							});
						} catch (err) {
							uni.hideLoading();
							this.$showToast(err.message || '获取年级列表失败');
							return;
						}
						this.p_grade.range = res1.result;
						this.p_grade.show = true;
						uni.hideLoading();
					}
				},
				i_identity: {
					range: [
						// {
						// 	text: '我是校长',
						// 	educationIdentity: 'headmaster'
						// },
						{
							text: '我是班主任',
							educationIdentity: 'class_teacher'
						},
						{
							text: '我是科任老师',
							educationIdentity: 'subject_teacher'
						}
					],
					data: {
						educationIdentity: ''
					},
					error: '',
					checkData: () => {
						const context = this.i_identity;
						return [
							() => {
								if (!context.data.educationIdentity) return '请选择您的身份';
							}
						];
					},
					clickItem: educationIdentity => {
						const context = this.i_identity;
						context.error = '';
						context.data.educationIdentity = educationIdentity;
					}
				},
				p_grade: {
					show: false,
					range: [],
					data: {
						grade: {}
					},
					handle: (fn, e, payload) => {
						if (fn === 'clickMask') this.p_grade.show = false;
					},
					clickItem: async grade => {
						uni.showLoading({
							mask: true
						});
						const context = this.p_grade;
						context.data.grade = grade;
						let res1;
						try {
							res1 = await this.$api.common.get_squad_select_list({
								syoufk: this.jxyUserInfo.schoolId,
								gradeId: grade.gradeId
							});
						} catch (err) {
							uni.hideLoading();
							this.$showToast(err.message);
							return;
						}
						this.p_squad.range = res1.result;
						this.p_grade.show = false;
						this.p_squad.show = true;
						uni.hideLoading();
					},
					clickIcon: () => {
						this.p_grade.show = false;
					}
				},
				p_squad: {
					show: false,
					range: [],
					handle: (fn, e, payload) => {
						if (fn === 'clickMask') this.p_squad.show = false;
					},
					clickItem: squad => {
						const grade = this.p_grade.data.grade;
						form.setItemData(this.i_squad, {
							grade: grade.gradeName,
							gradeId: grade.gradeId,
							squad: squad.squadName,
							squadId: squad.id
						});
						this.p_squad.show = false;
					},
					clickIcon: () => {
						this.p_squad.show = false;
						this.p_grade.show = true;
					}
				},
				squadItem: {
					item: {},
					getItem: async () => {
						const context = this.squadItem;
						const page = {};
						const data = {
							squad: this.squad
						};
						uni.showLoading({
							mask: true
						});
						let res1;
						try {
							res1 = await this.$api.common.get_squad_message_list({
								page,
								data
							});
						} catch (err) {
							uni.hideLoading();
							this.$showToast(err.message || '获取班级数据失败');
							return;
						}
						context.item = res1.result.data[0] || {};
						uni.hideLoading();
					}
				}
			};
		},
		computed: {
			...mapState({
				jxyUserInfo: state => state.User.userInfo.jxyUserInfo
			}),
			l_list() {
				return [this.i_squad, this.i_identity];
			},
			l_isPass() {
				return form.checkListData(this.l_list).length === 0;
			},
			squadName() {
				const context = this.i_squad;
				if (context.data.grade && context.data.squad) {
					return `${context.data.grade}${context.data.squad}班`;
				} else {
					return '';
				}
			}
		},
		methods: {
			async clickConfirmButton() {
				let errors = [];
				errors = form.checkListData(this.l_list, true);
				if (errors.length) {
					const error = errors.find(i => i)[0];
					this.$showToast(error);
					return;
				}
				const listData = form.getListData(this.l_list);
				const data = {
					squad: listData.squadId,
					educationIdentity: listData.educationIdentity
				};
				uni.showLoading({
					mask: true
				});
				let res1;
				try {
					res1 = await this.$api.user.alter_squad_info(data);
				} catch (err) {
					uni.hideLoading();
					this.$showToast(err.message || '修改失败');
					return;
				}
				if (listData.squadId !== this.squad) {
					// 修改了班级
					let res2;
					try {
						res2 = await this.$api.user.exit_squad({
							id: this.squadItem.item.id
						});
					} catch (err) {
						uni.hideLoading();
						this.$showToast(err.message || '操作失败');
						return;
					}
					wx.setStorageSync('currentSquadId', listData.squadId);
				}
				uni.hideLoading();
				this.$showToast('修改成功');
				uni.navigateBack();
			}
		},
		async onLoad(options) {
			this.squad = options.squad;
			try {
				await this.squadItem.getItem();
			} catch (err) {}
			form.setListData(this.l_list, {
				grade: this.squadItem.item.gradeName,
				gradeId: this.squadItem.item.gradeId,
				squad: this.squadItem.item.squadName,
				squadId: this.squadItem.item.squad,
				educationIdentity: this.squadItem.item.educationIdentity
			});
		}
	};
</script>

<style lang="less">
	.changeSquad-form {
		padding: 0 30rpx;

		.form-item {
			margin-top: 30rpx;
			border-bottom: 2rpx solid #eeeeee;

			&.none-border {
				border-bottom: none;
			}

			.item-label {
				font-size: 28rpx;
				color: #444444;

				margin-bottom: 10rpx;
			}

			.item-value {
				font-size: 32rpx;
				color: #222222;

				position: relative;
				padding-bottom: 40rpx;

				&.icon::after {
					content: '';
					width: 14rpx;
					height: 24rpx;
					position: absolute;
					right: 0;
					top: 14rpx;

					background-image: url(/static/my/icon_right.png);
					background-size: 100%;
					background-repeat: no-repeat;
				}
			}

			.item-right-icon {
				width: 14rpx;
				height: 24rpx;
			}

			.item-range {
				padding: 10rpx 0;

				display: flex;
				flex-wrap: wrap;

				.range-item {
					font-size: 28rpx;
					color: #222222;
					border: 2rpx solid #ebecee;
					border-radius: 40rpx;
					margin-right: 20rpx;

					padding: 10rpx 20rpx;

					&.selected {
						border: 2rpx solid #ff6600;
						color: #ff6600;
					}
				}
			}

			.item-error {
				font-size: 28rpx;
				color: #ff0000;
			}
		}
	}

	.changeSquad-button {
		height: 88rpx;
		border-radius: 44rpx;
		background-color: #ff6600;
		margin: 0 30rpx 30rpx 30rpx;

		font-size: 36rpx;
		color: #ffffff;

		display: flex;
		align-items: center;
		justify-content: center;
	}

	.page-popup {
		height: 750rpx;
		background-color: #ffffff;
		border-radius: 30rpx 30rpx 0 0;

		display: flex;
		flex-direction: column;

		.popup-title {
			height: 120rpx;
			border-bottom: 2rpx solid #e3e4e6;

			position: relative;

			font-size: 36rpx;
			color: #222222;

			display: flex;
			align-items: center;
			justify-content: flex-end;

			.title-center {
				text-align: center;

				position: absolute;
				left: 0;
				right: 0;
			}

			.title-side {
				z-index: 1;

				position: absolute;
				left: 0;
				right: 0;

				display: flex;
				align-items: center;

				.side-icon {
					transition: all 0.3s;

					&:active {
						opacity: 0.5;
					}
				}
			}
		}
	}

	.popup1 {
		.title-side {
			justify-content: flex-end;

			.side-icon {
				width: 24rpx;
				height: 24rpx;
				padding: 30rpx;
			}
		}

		.popup1-content {
			flex: 1;
			overflow: scroll;

			font-size: 32rpx;
			color: #222222;

			.content-item {
				line-height: 120rpx;
				transition: all 0.3s;

				&.active {
					color: #ff6600;
				}

				.item-text {
					margin-left: 30rpx;
					border-bottom: 2rpx solid #e3e4e6;
				}
			}
		}
	}

	.popup2 {
		.side-icon {
			width: 14rpx;
			height: 24rpx;
			padding: 30rpx;
		}

		.popup2-subtitle {
			height: 72rpx;
			font-size: 32rpx;
			color: #222222;

			padding: 0 30rpx;
			display: flex;
			align-items: center;
		}

		.popup2-content {
			flex: 1;
			overflow: scroll;
			line-height: 120rpx;

			.content-item {
				font-size: 32rpx;
				color: #222222;

				transition: all 0.3s;

				&.active {
					color: #ff6600;
				}

				.item-main {
					padding: 0 30rpx;

					display: flex;
					align-items: center;
					justify-content: space-between;

					.main-mark {
						width: 120rpx;
						height: 56rpx;
						background-color: #ff6600;
						border-radius: 30rpx;

						font-size: 28rpx;
						color: #ffffff;

						display: flex;
						align-items: center;
						justify-content: center;
					}
				}

				.item-line {
					height: 2rpx;
					background-color: #e3e4e6;
					margin-left: 30rpx;
				}
			}
		}
	}
</style>
